<template>
  <view class="container">
    <view class="header">
      <input
        type="text"
        placeholder="请输入todos"
        v-model="add"
        @confirm="addHandle"
      />
      <u-icon class="image" name="plus" @click="addHandle"></u-icon>
    </view>
    <block v-if="list.length">
      <view class="todos">
        <view
          :class="item.completed ? 'completed item' : 'item'"
          v-for="(item, index) in list"
          :key="index"
          @click="toggleHandle(item.id)"
        >
          <icon :type="item.completed ? 'success' : 'circle'"></icon>
          <text>{{ item.title }}</text>

          <icon type="clear" size="18" @click="removeHandle(item.id)"></icon>
        </view>
      </view>
      <view class="footer">
        <text @click="tooggleAllHandle">{{ list.length }} all</text>

        <text v-if="leftCount"
          >{{ leftCount }} {{ leftCount > 1 ? 'items' : 'item' }} left</text
        >
        <text @click="clearHandle">Clear completed</text>
      </view>
    </block>
    <view v-else class="null">
      <text>null</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      add: '',
      list: [
        {
          id: 1,
          title: 'Leanrning HTML',
          completed: true,
        },
        {
          id: 2,
          title: 'Leanrning CSS',
          completed: false,
        },
        {
          id: 3,
          title: 'Leanrning JS',
          completed: false,
        },
      ],
    };
  },

  computed: {
    //未完成数量
    leftCount() {
      let newList = this.list.filter((item) => !item.completed);
      return newList.length;
    },
  },

  methods: {
    //新增
    addHandle() {
      this.list.unshift({
        title: this.add,
        completed: false,
        id: Date.now(),
        isShow: true,
      });
      this.add = '';
    },
    // 切换状态
    toggleHandle(id) {
      const list = this.list.map((item) => ({
        ...item,
        completed: item.id === id ? !item.completed : item.completed,
      }));
      this.list = list;
    },
    // 切换全部
    tooggleAllHandle() {},
    // 删除
    removeHandle(id) {
      const list = this.list.filter((item) => item.id !== id);
      this.list = list;
    },
    // 清空全部已完成
    clearHandle() {
      const list = this.list.filter((item) => !item.completed);
      this.list = list;
    },
  },
};
</script>

<style lang="scss">
/**index.wxss**/
.header {
  display: flex;
  /* 侧轴对齐 */
  align-items: center;
  padding: 10rpx;
  margin: 20rpx;
  border: 1px #e0e0e0 solid;
  box-shadow: 0 0 10rpx #e0e0e0;
  border-radius: 5rpx;
}
.header input {
  flex: 1;
  padding: 10rpx;
}
.header .image {
  // background-color: red;
  font-size: 60rpx;
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.todos {
  border: 1px #e0e0e0 solid;
  box-shadow: 0 0 10rpx #e0e0e0;
  border-radius: 5rpx;
  margin: 20rpx;
}
.todos .item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #e0e0e0;
}
.todos .item:last-child {
  border-bottom: 0;
}
.todos .item text {
  flex: 1;
  font-size: 30rpx;
  color: #444;
  margin-left: 20rpx;
}
/* 删除的特殊样式 */
.todos .completed text {
  color: #888;
  text-decoration: line-through;
}
/* 页脚 */
.footer {
  width: 100%;
  display: flex;
  font-size: 30rpx;
  margin: 20rpx;
  justify-content: space-around;
  color: #333;
}
.null {
  width: 100%;
  color: #444;
  text-align: center;
}
</style>
